<div class="layui-fluid">
	<div class="layui-row">
		<div class="layui-col-xs12">
			<div class="videoO-top layui-backbox" id="tvideobox">
			</div>

			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title" style="	margin-top: 10px;">
					<li class="layui-this">评论（<font id="count1">0</font>条）</li>

					<li>收藏（<font id="count2">0</font>条）</li>
					<li>分享（<font id="count3">0</font>条）</li>
					<li>浏览（<font id="count4">0</font>条）</li>
					<li>举报（<font id="count5">0</font>条）</li>
				</ul>
				<div class="layui-tab-content" style="padding: 10px 0;">
					<div class="layui-tab-item layui-show">
						<!-- 评论 -->
						<table id="teachertable1" lay-filter="type_hash" lay-even lay-skin="nob"></table>
					</div>

					<div class="layui-tab-item ">
						<!-- 收藏 -->
						<table id="teachertable2" lay-filter="type_hash2" lay-even lay-skin="nob"></table>
					</div>
					<div class="layui-tab-item ">
						<!-- 分享 -->
						<table id="teachertable3" lay-filter="type_hash3" lay-even lay-skin="nob"></table>
					</div>
					<div class="layui-tab-item ">
						<!-- 浏览 -->
						<table id="teachertable4" lay-filter="type_hash4" lay-even lay-skin="nob"></table>
					</div>
					<div class="layui-tab-item ">
						<!-- 举报 -->
						<table id="teachertable5" lay-filter="type_hash5" lay-even lay-skin="nob"></table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>



<script type="text/html" id="videodet">
	<div class = "videoO-fm" style="background-image: url({{  IMG_URL + d.image }});">
		</div> 
	<div class = "videoO-tcont" >
	<div class = "videoO-title" >
	{{d.title}}
		</div> 
		<div class = "videoO-time" >
		发布时间：{{d.createTime}}
		</div>	
		<div class="bianjibtn">
			编辑
		</div>
		</div >
		</div>
</script>


<!----------------------------------------------- 评论 ----------------------------------------------->
<script type="text/html" id="barteachertable">
	<a class="layui-btn" lay-event="look">查看</a>
	<a class="layui-btn" lay-event="del">删除</a>
</script>

<script type="text/html" id="teachertoolbar">
	<div class="toobarbox justright" >
			<div class="layui-inline">
			<input type="text" class="layui-input" id="datpl" placeholder="选择日期">
		</div>
			<div class="tablesearch iconfont iconsousuo ">
					<input type="text" class="layui-input " id="tablesearchid" title="请输入搜索的关键字" placeholder="请输入搜索关键字">
			</div>
			</div>
</script>

<script type="text/html" id="headimgTp">
	<!-- 这里的 checked 的状态只是演示 -->
 <img src="{{ IMG_URL + d.photo }}"  style="height: 100%;"  alt="讲师头像"  >
</script>

<script type="text/html" id="StatusTp1">
	<!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="isTop" value="{{d.isTop}}" lay-skin="switch"  lay-filter="istopDemo" {{ d.isTop == 1 ? 'checked' : '' }}>
</script>

<!----------------------------------------------- 收藏----------------------------------------------->


<script type="text/html" id="scteachertoolbar">
	<div class="toobarbox justright" >
			<div class="layui-inline">
			<input type="text" class="layui-input" id="datpl2" placeholder="选择日期">
		</div>
			<div class="tablesearch iconfont iconsousuo ">
					<input type="text" class="layui-input " id="sctablesearchid" title="请输入搜索的关键字" placeholder="请输入搜索关键字">
			</div>
			</div>
</script>

<script type="text/html" id="praiseStatusTp">
	<!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="praiseStatus" value="{{d.praiseStatus}}" lay-skin="switch"  lay-filter="praiseStatusDemo" {{ d.praiseStatus == 1 ? 'checked' : '' }} disabled>
</script>

<!----------------------------------------------- 分享 ----------------------------------------------->

<script type="text/html" id="fxteachertoolbar">
	<div class="toobarbox justright" >
			<div class="layui-inline">
			<input type="text" class="layui-input" id="datpl3" placeholder="选择日期">
		</div>
			<div class="tablesearch iconfont iconsousuo ">
					<input type="text" class="layui-input " id="fxtablesearchid" title="请输入搜索的关键字" placeholder="请输入搜索关键字">
			</div>
			</div>
</script>

<script type="text/html" id="praiseStatusTp">
	<!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="praiseStatus" value="{{d.praiseStatus}}" lay-skin="switch"  lay-filter="praiseStatusDemo" {{ d.praiseStatus == 1 ? 'checked' : '' }} disabled>
</script>



<!--------------------------------------------- 浏览----------------------------------------------->
<script type="text/html" id="barsctable">
	<a class="layui-btn" lay-event="look">查看</a>
</script>

<script type="text/html" id="llteachertoolbar">
	<div class="toobarbox justright" >
			<div class="layui-inline">
			<input type="text" class="layui-input" id="datpl4" placeholder="选择日期">
		</div>
			<div class="tablesearch iconfont iconsousuo ">
					<input type="text" class="layui-input " id="lltablesearchid" title="请输入搜索的关键字" placeholder="请输入搜索关键字">
			</div>
			</div>
</script>

<script type="text/html" id="praiseStatusTp">
	<!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="praiseStatus" value="{{d.praiseStatus}}" lay-skin="switch"  lay-filter="praiseStatusDemo" {{ d.praiseStatus == 1 ? 'checked' : '' }} disabled>
</script>


<script>
	layui.config({
		base: '/src/js/'
	}).use(['jquery', 'mockjs', 'table', 'sidebar', 'form', 'laydate', 'laytpl'], function() {
		var $ = layui.jquery,
			layer = layui.layer,
			table = layui.table,
			sidebar = layui.sidebar,
			form = layui.form,
			laytpl = layui.laytpl,
			laydate = layui.laydate;

		var router = layui.router();
			// 获取当前的视频详情
		POSTAJAX(VideoGetById, {
			tbId: router.search.tbId
		}, function(res) {
			laytpl($("#videodet").html()).render(res.data, function(html) {
				$("#tvideobox").html(html);
			});
		})
		//评论


		var plitemjson = {
			search: '',
			startTime: '',
			stopTime: '',
			tbId: router.search.tbId,
			type: 3
		}
	

		//基础
		var tablejson = [ //表头
			{
				type: 'numbers',
				fixed: 'left'
			}, {
				field: 'isTop',
				title: '是否置顶', // 1是 2否
				width: 100,
				templet: '#StatusTp1',
				unresize: true
			},
			{
				field: 'id',
				title: 'ID',
				hide: true
			}, {
				field: 'photo',
				title: '讲师头像',
				templet: '#headimgTp',
				event: 'lookheadimg',
				width: 150
			}, {
				field: 'realName',
				title: '用户昵称',
				width: 120
			}, {
				field: 'udesc',
				title: '回复内容',
				width: 120,

			}, {
				field: 'createTime',
				title: '创建时间',
				width: 120
			}, {
				field: 'commentsNumber',
				title: '评论数量',
				width: 100
			}, {
				field: 'praiseNumber',
				title: '点赞数量',
				width: 100
			}, {
				title: '操作',
				fixed: 'right',
				width: 180,
				toolbar: '#barteachertable'
			}
		]

		var plkey = '';
		var typetable = table.render({
			size: 'lg',
			id: 'pltableid',
			where: plitemjson,
			contentType: 'application/json',
			pageSize: 10,
			elem: '#teachertable1',
			toolbar: '#teachertoolbar',
			url: HH_URL + LecturerOParent, //数据接口
			page: true, //开启分页
			even: true,
			skin: 'nob',
			cellMinWidth: 100,
			cols: [
				tablejson
			],
			done: function(res, curr, cont) {

				$('#count1').html(cont)
				$('#tablesearchid').keydown(function(event) {
					if (event.keyCode == 13) {
						xykey = $('#tablesearchid').val();
						plitemjson.search = $('#tablesearchid').val()
						table.reload('pltableid', {
							where: plitemjson,
							page: {
								curr: 1 //重新从第 1 页开始
							}
						}, 'data');
						// setTimeout(function(){
						$("#tablesearchid").val(xykey)
						// },100)
					}

				})
				if (plitemjson.startTime != '') {
					//时间搜索框的处理
					$("#datpl").val(plitemjson.startTime + ' - ' + plitemjson.stopTime)
				}

				//时间搜索选择
				laydate.render({
					elem: '#datpl', //指定元素
					range: true,
					done: function(value, date, endDate) {
						if (value == '') {
							plitemjson.startTime = '',
								plitemjson.stopTime = ''

						} else {
							plitemjson.startTime = date.year + '-' + date.month + '-' + date.date,
								plitemjson.stopTime = endDate.year + '-' + endDate.month + '-' + endDate.date
						}
						table.reload('pltableid', {
							where: plitemjson,
							page: {
								curr: 1 //重新从第 1 页开始
							}
						});
					}
				});

			}
		});
		//监听事件
		table.on('toolbar(type_hash)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			switch (layEvent) {
				case 'delallbtn':
					//批量删除行数
					// console.log(checkStatus.data);
					var tbarray = [];
					$.each(checkStatus.data, function(idx, obj) {
						tbarray.push(obj.tbId);
					})
					// layer.confirm('确认删除所选中行的数据吗?', function(index) {
					// 	POSTAJAX(VtypeDel, {
					// 		ids: tbarray
					// 	}, function(res) {
					// 		layer.close(index);
					// 		layer.msg(res.msg);
					// 		if (res.status == 200) {
					// 			typetable.reload('teachertable');
					// 		}
					// 	})
					// });
					break;
				default:

					break;
			}
		});

		//监听工具条
		table.on('tool(type_hash)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			switch (layEvent) {
				case 'look':
					layer.msg(JSON.stringify(obj.data));
					break;
				case 'del':
					delfn({
						ids: [obj.data.tbId]
					}, obj);

					break;
				case 'lookheadimg':
					layer.open({
						type: 1,
						title: false,
						closeBtn: 0,
						// area: '200px',
						skin: 'layui-layer-nobg', //没有背景色
						shadeClose: true,
						content: ' <img src="' + IMG_URL + obj.data.photo + '"  alt="讲师头像"  >'
					});
					// layer.msg("图图图")
					break;
				default:
					break;
			}
		});

		form.on('switch(istopDemo)', function(obj) {
			// 监听协议的状态替换
			if (obj.elem.checked) {
				var checknum = 1
			} else {
				var checknum = 2
			}
			// POSTAJAX(AgreementModState, {
			// 	tbAgreementStatus: checknum,
			// 	tbId: obj.value
			// }, function(res) {
			// 	if (res.status == 200) {
			layer.msg("缺接口", {
				"icon": 1
			});
			// 	}
			// })
		});

		function delfn(tdata, obj) {
			layer.confirm('确认删除该评论吗?', function(index) {
				// 				POSTAJAX(VtypeDel, tdata, function(res) {
				// 					layer.close(index);
				// 					layer.msg(res.msg);
				// 					if (res.status == 200) {
				// 						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
				// 
				// 					}
				// 
				// 				})
			});
		}




		// ----------------------------------------收藏---------------------------------------

		var scitemjson = {
		
			search: '',
			startTime: '',
			stopTime: '',
			tbId: router.search.tbId,
			type: 1
		}

		//基础
		var sctablejson = [ //表头
			{
				type: 'numbers',
				fixed: 'left'
			}, {
				field: 'praiseStatus',
				title: '收藏状态', // 1是 2否
				width: 100,
				templet: '#praiseStatusTp',
				unresize: true
			},
			{
				field: 'id',
				title: 'ID',
				hide: true
			}, {
				field: 'tbUserID',
				title: '用户ID',
				width: 100
			}, {
				field: 'photo',
				title: '头像',
				templet: '#headimgTp',
				event: 'lookheadimg',
				width: 150
			}, {
				field: 'realName',
				title: '名字',
				width: 120
			}, {
				field: 'tbUserIdentity',
				title: '用户身份',
				width: 120,
				templet: function(d) {
					switch (d.tbUserIdentity) {
						case 1:
							return '黑名单'
							break;
						case 2:
							return '白名单'
							break;
						case 3:
							return '普通'
							break;
						default:
							return ''
							break;
					}

				}

			}, {
				field: 'createTime',
				title: '创建时间',
				width: 200
			}
		]

		var sckey = '';
		var sctypetable = table.render({
			size: 'lg',
			id: 'sctableid',
			where: scitemjson,
			contentType: 'application/json',
			pageSize: 10,
			elem: '#teachertable2',
			toolbar: '#scteachertoolbar',
			
			url: HH_URL + LecturerOCollect, //数据接口
			page: true, //开启分页
			even: true,
			skin: 'nob',
			cellMinWidth: 100,
			cols: [
				sctablejson
			],
			done: function(res, curr, cont) {
			
				$('#count2').html(cont)
				$('#sctablesearchid').keydown(function(event) {
					if (event.keyCode == 13) {
						sckey = $('#sctablesearchid').val();
						scitemjson.search = $('#sctablesearchid').val()
						table.reload('sctableid', {
							where: scitemjson,
							page: {
								curr: 1 //重新从第 1 页开始
							}
						}, 'data');
						// setTimeout(function(){
						$("#sctablesearchid").val(sckey)
						// },100)
					}

				})
				if (scitemjson.startTime != '') {
					//时间搜索框的处理
					$("#datpl2").val(scitemjson.startTime + ' - ' + scitemjson.stopTime)
				}

				//时间搜索选择
				laydate.render({
					elem: '#datpl2', //指定元素
					range: true,
					done: function(value, date, endDate) {
						if (value == '') {
							scitemjson.startTime = '',
								scitemjson.stopTime = ''

						} else {
							scitemjson.startTime = date.year + '-' + date.month + '-' + date.date,
								scitemjson.stopTime = endDate.year + '-' + endDate.month + '-' + endDate.date
						}
						table.reload('sctableid', {
							where: scitemjson,
							page: {
								curr: 1 //重新从第 1 页开始
							}
						});
					}
				});

			}
		});


		//监听工具条
		table.on('tool(type_hash2)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			switch (layEvent) {
				case 'lookheadimg':
					layer.open({
						type: 1,
						title: false,
						closeBtn: 0,
						// area: '200px',
						skin: 'layui-layer-nobg', //没有背景色
						shadeClose: true,
						content: ' <img src="' + IMG_URL + obj.data.photo + '"  alt="讲师头像"  >'
					});
					break;
				default:
					break;
			}
		});


// ----------------------------------------分享---------------------------------------
		
		var fxitemjson = {
				
					search: '',
					startTime: '',
					stopTime: '',
					tbId: router.search.tbId
				}
		
				//基础
				var fxtablejson = [ //表头
					{
						type: 'numbers',
						fixed: 'left'
					},
					{
						field: 'id',
						title: 'ID',
						hide: true
					}, {
						field: 'tbUserID',
						title: '用户ID',
						width:100
					},{
						field: 'photo',
						title: '头像',
						templet: '#headimgTp',
						event: 'lookheadimg',
						width: 150
					}, {
						field: 'realName',
						title: '名字',
						width: 120
					}, {
						field: 'tbUserIdentity',
						title: '用户身份',
						width: 120,
							templet: function(d) {
							switch (d.tbUserIdentity) {
								case 1:
									return '黑名单'
									break;
								case 2:
									return '白名单'
									break;
								case 3:
									return '普通'
									break;
								default:
									return ''
									break;
							}
						
						}
		
					}, {
						field: 'number',
						title: '分享次数',
						width: 120
					}, {
						field: 'createTime',
						title: '创建时间',
						width: 200
					}
				]
		
				var fxkey = '';
				var fxtypetable = table.render({
					size: 'lg',
					id: 'fxtableid',
					where: fxitemjson,
					contentType: 'application/json',
					pageSize: 10,
					elem: '#teachertable3',
					toolbar: '#fxteachertoolbar',
					
					url: HH_URL + LecturerOShare, //数据接口
					page: true, //开启分页
					even: true,
					skin: 'nob',
					cellMinWidth: 100,
					cols: [
						fxtablejson
					],
					done: function(res, curr, cont) {
					
						$('#count3').html(cont)
						$('#fxtablesearchid').keydown(function(event) {
							if (event.keyCode == 13) {
								fxkey = $('#fxtablesearchid').val();
								fxitemjson.search = $('#fxtablesearchid').val()
								table.reload('fxtableid', {
									where: fxitemjson,
									page: {
										curr: 1 //重新从第 1 页开始
									}
								}, 'data');
								// setTimeout(function(){
								$("#fxtablesearchid").val(fxkey)
								// },100)
							}
		
						})
						if (fxitemjson.startTime != '') {
							//时间搜索框的处理
							$("#datpl3").val(fxitemjson.startTime + ' - ' + fxitemjson.stopTime)
						}
						
						//时间搜索选择
						laydate.render({
							elem: '#datpl3', //指定元素
							range: true,
							done: function(value, date, endDate) {
								if (value == '') {
									fxitemjson.startTime = '',
										fxitemjson.stopTime = ''
		
								} else {
									fxitemjson.startTime = date.year + '-' + date.month + '-' + date.date,
										fxitemjson.stopTime = endDate.year + '-' + endDate.month + '-' + endDate.date
								}
								table.reload('fxtableid', {
									where: fxitemjson,
									page: {
										curr: 1 //重新从第 1 页开始
									}
								});
							}
						});
		
					}
				});
				
				
				//监听工具条
				table.on('tool(type_hash3)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; //获得当前行 tr 的DOM对象
					switch (layEvent) {
						case 'lookheadimg':
							layer.open({
								type: 1,
								title: false,
								closeBtn: 0,
								// area: '200px',
								skin: 'layui-layer-nobg', //没有背景色
								shadeClose: true,
								content: ' <img src="' + IMG_URL + obj.data.photo + '"  alt="讲师头像"  >'
							});
							break;
						default:
							break;
					}
				});
				
						// --------------------------------------- 浏览---------------------------------------
				
				var llitemjson = {
			
					search: '',
					startTime: '',
					stopTime: '',
					tbId: router.search.tbId
				}
				
				//基础
				var lltablejson = [ //表头
					{
						type: 'numbers',
						fixed: 'left'
					},
					{
						field: 'id',
						title: 'ID',
						hide: true
					}, {
						field: 'tbUserID',
						title: '用户ID',
						width: 100
					}, {
						field: 'photo',
						title: '头像',
						templet: '#headimgTp',
						event: 'lookheadimg',
						width: 150
					}, {
						field: 'realName',
						title: '名字',
						width: 120
					}, {
						field: 'tbUserIdentity',
						title: '用户身份',
						width: 120,
						templet: function(d) {
							switch (d.tbUserIdentity) {
								case 1:
									return '黑名单'
									break;
								case 2:
									return '白名单'
									break;
								case 3:
									return '普通'
									break;
								default:
									return ''
									break;
							}
				
						}
				
					}, {
						field: 'number',
						title: '浏览次数',
						width: 120
					}, {
						field: 'createTime',
						title: '创建时间',
						width: 200
					}
				]
				
				var llkey = '';
				var lltypetable = table.render({
					size: 'lg',
					id: 'lltableid',
					where: llitemjson,
					contentType: 'application/json',
					pageSize: 10,
					elem: '#teachertable4',
					toolbar: '#llteachertoolbar',
					
					url: HH_URL + LecturerOPLookList, //数据接口
					page: true, //开启分页
					even: true,
					skin: 'nob',
					cellMinWidth: 100,
					cols: [
						lltablejson
					],
					done: function(res, curr, cont) {
				
						$('#count4').html(cont)
						$('#lltablesearchid').keydown(function(event) {
							if (event.keyCode == 13) {
								llkey = $('#lltablesearchid').val();
								llitemjson.search = $('#lltablesearchid').val()
								table.reload('lltableid', {
									where: llitemjson,
									page: {
										curr: 1 //重新从第 1 页开始
									}
								}, 'data');
								// setTimeout(function(){
								$("#lltablesearchid").val(llkey)
								// },100)
							}
				
						})
						if (llitemjson.startTime != '') {
							//时间搜索框的处理
							$("#datpl4").val(llitemjson.startTime + ' - ' + llitemjson.stopTime)
						}
				
						//时间搜索选择
						laydate.render({
							elem: '#datpl4', //指定元素
							range: true,
							done: function(value, date, endDate) {
								if (value == '') {
									llitemjson.startTime = '',
										llitemjson.stopTime = ''
				
								} else {
									llitemjson.startTime = date.year + '-' + date.month + '-' + date.date,
										llitemjson.stopTime = endDate.year + '-' + endDate.month + '-' + endDate.date
								}
								table.reload('lltableid', {
									where: llitemjson,
									page: {
										curr: 1 //重新从第 1 页开始
									}
								});
							}
						});
				
					}
				});
				
				
				//监听工具条
				table.on('tool(type_hash4)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; //获得当前行 tr 的DOM对象
					switch (layEvent) {
						case 'lookheadimg':
							layer.open({
								type: 1,
								title: false,
								closeBtn: 0,
								// area: '200px',
								skin: 'layui-layer-nobg', //没有背景色
								shadeClose: true,
								content: ' <img src="' + IMG_URL + obj.data.photo + '"  alt="讲师头像"  >'
							});
							break;
						default:
							break;
					}
				});

	});
</script>

<style scoped>

</style>
